import React from 'react';
import ImageLazy from '../commons/ImageLazy';
import NavLink from '../commons/NavLink';
import { connect } from 'react-redux';
import {mall_them_hos_det,mall_them_doc_det,mall_them_hos_servItem} from '../../actions';
import {getHosImg,getDocImg,getServImg} from '../../actions/ActionTypes';

const mall_vip = require('!url?limit=8192&name=static/img/[hash:6].[ext]!../../static/img/mall_vip.png');
const arr_right = require('!url?limit=8192&name=static/img/[hash:6].[ext]!../../static/img/arr_right.png');

let myDefault = React.createClass({
  componentDidMount:function(){
    const {dispatch} = this.props;
    dispatch(mall_them_doc_det(this.props.docId))
  },
  render:function(){
    var docItem = this.props.docItem,
        doctorDetail = docItem.doctorDetail || '',
        doctorPic = docItem.doctorPic || '',
        doctorPic = !!doctorPic != false?getDocImg(doctorPic,'_200_200',docItem.hospitalId,docItem.doctorId):"",
        certificatePic = docItem.certificatePic || '',
        certificatePic = !!certificatePic != false?getDocImg(certificatePic,'_750_480',docItem.hospitalId,docItem.doctorId):"",
        itemList = this.props.itemList || [];
    return(
      <div className="m_doc_det">
        <header className="top border_b1">
          <div className="doc_tit">
            <span className="doc_h_pic" style={{'background-image':"url(" + doctorPic + ")"}}></span>
            <h4>
              {docItem.doctorName}·{docItem.doctorViceTitle}
              <small><NavLink to={"/hos/det/" + docItem.hospitalId}><font className="txt_ellip">{docItem.hospitalName}</font> <ImageLazy src={mall_vip} style={{"width":".26rem"}} /> <ImageLazy src={arr_right} style={{'width':".14rem"}}/></NavLink></small>
            </h4>
          </div>
          <br/>
          <p>
            {docItem.doctorProfile}
          </p>
        </header>
        <div className="serv_pro">
          <h3 className="tit_sty1">
              服务项目<br/><small>为您私人定制</small>
          </h3>
          <div className="item_wrapper">
          {
            itemList.map(function(item,index){
              var imgsrc = getServImg(item.itemImage,'_200_200',item.hospitalId,item.itemId);
              return(
                <NavLink to={"/servItem/det/" + item.itemId} className="common_item border_b1">
                  <div className="left">
                    <em style={{"background-image":"url("+ imgsrc +")"}}></em>
                    {/* <img src={imgsrc} style={{height:'2rem'}} /> */}
                  </div>
                  <div className="right">
                    <h4>{item.itemName} {item.subtitle}</h4>
                    <p>
                      {/* {item.doctorName}·医学博士<br/> */}
                      {item.hospitalName}
                    </p>
                    <div className="price"><span>¥ {item.sellingPrice}</span></div><s className="o_price">¥ {item.originalPrice}</s>
                  </div>
                </NavLink>
              )
            })
          }

          </div>
        </div>
        <div className="professional border_b1">
          <h3 className="tit_sty1">
              关于TA<br/><small>About docter</small>
          </h3>
          <div className="wrapper">
            {doctorDetail}
          </div>
        </div>


        <div className="fix_tel box border_t1">
          <a href="tel:400-886-8382">电话咨询</a>
        </div>
      </div>
    )
  }
})

let mapStateToProps = (state,ownProps)=>{
  var docItem = state.mall.mall_them_doc_det || [],
      itemList = docItem.itemList || [];
  console.log(docItem.doctorDetail)
  return{
    docItem,
    itemList,
    docId:ownProps.params.id
  }
}

export default connect(mapStateToProps)(myDefault);
